<template>
  <el-dialog title="理赔信息详情" :visible.sync="open" width="1000px" append-to-body v-dialogDrag
             :close-on-click-modal="false" @close="closeDialog">
    <el-form ref="form" :model="form" label-width="110px" :key="formKey">
      <el-card shadow="never" :body-style="{ height: '10px' }" style="margin-bottom: 10px">
        <el-descriptions title="合同主体信息"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投保人名称" prop="toubaoName">
              <el-input v-model="form.toubaoName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="被保险人名称" prop="beibaoName">
              <el-input v-model="form.beibaoName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险人名称" prop="baoxianId">
              <el-input v-model="form.baoxianName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纪/代理公司名称" prop="proxyId">
              <el-input v-model="form.proxyName" placeholder="" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="保单信息"/>
        <el-form-item label="保单号码" prop="insureNo">
          <el-input v-model="form.insureNo" placeholder="" disabled/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险合同名称" prop="contractName">
              <el-input v-model="form.contractName" placeholder="" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="险种" prop="insureType">
              <el-select v-model="form.insureType" placeholder="险种" clearable disabled>
                <el-option
                    v-for="dict in dict.type.insure_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保单期限" prop="insureLimit">
              <el-date-picker clearable
                              disabled
                              v-model="form.insureLimit"
                              type="month"
                              style="width: 100%"
                              value-format="yyyy-MM"
                              placeholder="请选择保单期限">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保单起期" prop="insureStartDate">
              <el-date-picker clearable
                              disabled
                              v-model="form.insureStartDate"
                              type="date"
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="请选择保单起期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保单止期" prop="insureEndDate">
              <el-date-picker clearable
                              v-model="form.insureEndDate"
                              type="date"
                              disabled
                              value-format="yyyy-MM-dd"
                              format="yyyy-MM-dd"
                              placeholder="请选择保单止期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保险金额" prop="insureAmount">
              <el-input v-model="form.insureAmount" placeholder="请输入保险金额" disabled>
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="保险费率" prop="insureRate">
              <el-input v-model="form.insureRate" placeholder="请输入保险费率" disabled>
                <template slot="append">
                  <el-button slot="append">%</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保费" prop="premium">
              <el-input v-model="form.premium" disabled placeholder="保费">
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="报损及已决"/>
        <el-row>
          <el-col :span="12">
            <el-form-item label="总计报损金额" prop="totalAmount">
              <el-input v-model="form.totalAmount" disabled placeholder="">
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="已决赔款">
              <el-input v-model="form.completeAmount" disabled placeholder="">
                <template slot="append">
                  <el-button slot="append">元</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="已决赔付率" prop="rate">
              <el-input v-model="form.rate" disabled placeholder="">
                <template slot="append">
                  <el-button slot="append">%</el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '10px'}" style="margin-bottom: 10px">
        <el-descriptions title="赔案具体信息"/>

            <el-table  :data="form.caseList"  >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table  :data="props.row.payList" >
                    <el-table-column label="收款人名称" align="center" prop="recipient"/>
                    <el-table-column label="支付方式" align="center" prop="payType">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.settle_pay_type" :value="scope.row.payType"/>
                      </template>
                    </el-table-column>
                    <el-table-column label="开户行" align="center" prop="openingBank"/>
                    <el-table-column label="银行账户" align="center" prop="accountNumber"/>
                    <el-table-column label="支付金额(元)" align="center" prop="payAmount"/>
                    <el-table-column label="支付时间" align="center" prop="payTime" width="180">
                      <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="赔案状态" align="center" prop="caseStatus">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.case_status" :value="scope.row.caseStatus"/>
                </template>
              </el-table-column>
              <el-table-column label="出险日期" align="center" prop="caseDate" width="130">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.caseDate, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="出险原因" align="center" prop="reason" :min-width="120"/>
              <el-table-column label="报损金额(元)" align="center" prop="caseAmount" :min-width="120"/>
              <el-table-column label="出险地点" align="center" prop="location" :min-width="100"/>
              <el-table-column label="报案方式" align="center" prop="reportType">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.report_type" :value="scope.row.reportType"/>
                </template>
              </el-table-column>
              <el-table-column label="报案时间" align="center" prop="reportTime" width="130">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.reportTime, '{y}-{m}-{d}') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="报案人" align="center" prop="reportPerson"/>
              <el-table-column label="联系电话" align="center" prop="reportTel" :min-width="120"/>
              <el-table-column label="报案人所属单位" align="center" prop="reportCompany" :min-width="120"/>
              <el-table-column label="出险经过" align="center" prop="casePass" :min-width="120"/>
              <el-table-column label="施救情况" align="center" prop="saveSituation" :min-width="120"/>
              <el-table-column label="理算过程说明" align="center" prop="describe" :min-width="100"/>
              <el-table-column label="已付赔案金额(元)" align="center" prop="completeMoney" :min-width="130"/>
            </el-table>

      </el-card>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  getContractCoinsuranceList,
  getContractDetail,
  getContractPay,
  getContractPremium, getSettleDetail
} from "@/api/insurance/contract";

export default {
  name: "settleDetail",
  dicts: ['insure_type','case_status','report_type','settle_pay_type'],
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      formKey: Math.random() * 100,
      form: {},
      caseList: [],
      planList: [],
      planListProxy: [],
      realList: [],
      coinsuranceList: [],
      realListProxy: [],
      open: false,
    }
  },
  methods: {
    openDialog(id) {
      this.formKey = Math.random() * 100
      this.open = true
      getSettleDetail(id).then(response => {
        this.form = response.data
      })
      // getContractPremium(id).then(response => {
      //   this.planList = response.data.premiumPlanList
      //   this.realList = response.data.premiumRealList
      // })
      // getContractPay(id).then(response => {
      //   this.planListProxy = response.data.commissionPlanList
      //   this.realListProxy = response.data.commissionRealList
      // })
      // getContractCoinsuranceList(id).then(response => {
      //   this.coinsuranceList = response.data
      // })
    },
    closeDialog() {
      this.$emit('closeDialog')
    },
    openMap() {
    },
    handleView(row) {
      window.open(this.baseUrl + "/" + row.filePath, '_blank')
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #050608;
  background-color: #fff;
}

::v-deep .el-descriptions {
  &:not(:nth-child(1)) {
    margin-top: 20px;
  }

  .el-descriptions__title {
    display: flex;
    align-items: center;

    &::before {
      display: inline-block;
      width: 3px;
      height: 20px;
      margin-right: 10px;
      background-color: #409eff;
      content: '';
    }
  }

  .el-descriptions-item__container {
    margin: 0 10px;

    .no-colon {
      margin: 0;

      &::after {
        content: '';
      }
    }
  }
}
</style>
